<template>
  <div class="personalContainer">
    <FarmerAside v-show="loginUser.role ==='农户'"/>
    <ExpertAside v-show="loginUser.role ==='专家'"/>
    <AdminAside v-show="loginUser.role ==='管理员'"/>
    <div class="w content-container clearfix">
      <router-view/>
    </div>
  </div>
</template>

<script>
import FarmerAside from "@/components/farmer/FarmerAside";
import {mapState} from "vuex";
import AdminAside from "@/components/admin/AdminAside";
import ExpertAside from "@/components/expert/ExpertAside";

export default {
  name: "Center",
  components:{
    FarmerAside,
    AdminAside,
    ExpertAside
  },
  computed:{
    ...mapState('user',['loginUser'])
  },
}
</script>

<style scoped>
  .content-container{
    height: calc(100vh - 100px);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
  }
</style>